<template>
	<view class="mainbgc mainpadding2">
		<header-top :messageInfo="{typeFlag:true,message:'考勤设置',liner:false}"></header-top>
		<view class="mainpadding_top ffffff radius">
			<view class="strongtext ">考勤星期</view>
			<view class="flexleft flex_wrap">
				<view class="itembox flexcenter margin_top" v-for="(item,index) in weekDays" :key="index"
					@click="checkweek(item)">
					<view :class="item.ischeck?'itemlables':'itemlable'">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">上班时间</view>
			<view class="flexright" @click="checktime(1)">
				<input type="text" disabled="" style="text-align: right;" placeholder="请选择" v-model="kq_start_time">
				<u-icon name="arrow-right" class="margin_left" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">下班时间</view>
			<view class="flexright" @click="checktime(2)">
				<input type="text" disabled="" style="text-align: right;" placeholder="请选择" v-model="kq_end_time">
				<u-icon name="arrow-right" class="margin_left" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">上班开始打卡时间</view>
			<view class="flexright"  @click="checktime(3)">
				<input type="text" disabled="" style="text-align: right;" placeholder="请选择"
					v-model="kq_start_starttime">
				<u-icon name="arrow-right" class="margin_left" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">上班结束打卡时间</view>
			<view class="flexright"  @click="checktime(4)">
				<input type="text" disabled="" style="text-align: right;" placeholder="请选择" v-model="kq_start_endtime">
				<u-icon name="arrow-right" class="margin_left" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">下班开始打卡时间</view>
			<view class="flexright"  @click="checktime(5)">
				<input type="text" disabled="" style="text-align: right;" placeholder="请选择" v-model="kq_end_starttime">
				<u-icon name="arrow-right" class="margin_left" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">下班结束打卡时间</view>
			<view class="flexright"  @click="checktime(6)">
				<input type="text" disabled="" style="text-align: right;" placeholder="请选择" v-model="kq_end_endtime">
				<u-icon name="arrow-right" class="margin_left" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">下班时间结束类型</view>
			<u-radio-group v-model="kq_end_endtime_type" placement="row" circle style="justify-content: flex-end;">
				<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="当天" name="1"></u-radio>
				<u-radio activeColor="#0BBDCB" label="次日" name="2"></u-radio>
			</u-radio-group>
		</view>
		<view class="mainpadding_top ffffff radius flexbetween">
			<view class="strongtext">考勤旷工时间（分）</view>
			<input type="number" style="text-align: right;" placeholder="请输入" v-model="kq_kg_time">
		</view>
		
		<view class="yesbtn" style="position: inherit; box-sizing: border-box;" @click="submit">确认</view>
		<u-datetime-picker :show="show" mode="time" @cancel="show=false" @confirm="confirmtime"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				checkcurrent:1,
				show:false,
				weekDays: [{
						name: "周一",
						ischeck: false,
						value: 1
					}, {
						name: "周二",
						ischeck: false,
						value: 2
					}, {
						name: "周三",
						ischeck: false,
						value: 3
					}, {
						name: "周四",
						ischeck: false,
						value: 4
					}, {
						name: "周五",
						ischeck: false,
						value: 5
					}, {
						name: "周六",
						ischeck: false,
						value: 6
					}, {
						name: "周日",
						ischeck: false,
						value: 0
					}

				],
				kq_start_time: "", //考勤上班时间
				kq_end_time: "", //考勤下班时间
				kq_start_starttime: "", //考勤上班开始打卡时间
				kq_start_endtime: "", //考勤上班结束打卡时间
				kq_end_starttime: "", //考勤下班开始打卡时间
				kq_end_endtime: "", //考勤下班结束打卡时间
				kq_end_endtime_type: "1", //考勤下班时间结束类型:1=当天,2=次日
				kq_kg_time: "", //考勤旷工时间
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				httpRequest.request('/dhtapi/user/getKqTimeDetail', 'POST', {
				}, false, false, true).then(res => {
					let arr = res.data.kq_week_num.split(",")
					arr.forEach(item=>{
						this.weekDays.forEach(ite=>{
							if(item==ite.value){
								ite.ischeck = true
							}
						})
					})
					this.kq_start_time = res.data.kq_start_time //考勤上班时间
					this.kq_end_time = res.data.kq_end_time //考勤下班时间
					this.kq_start_starttime = res.data.kq_start_starttime //考勤上班开始打卡时间
					this.kq_start_endtime = res.data.kq_start_endtime //考勤上班结束打卡时间
					this.kq_end_starttime = res.data.kq_end_starttime //考勤下班开始打卡时间
					this.kq_end_endtime = res.data.kq_end_endtime //考勤下班结束打卡时间
					this.kq_end_endtime_type = res.data.kq_end_endtime_type //考勤下班时间结束类型:1=当天,2=次日
					this.kq_kg_time = res.data.kq_kg_time //考勤旷工时间
				}).catch(err=>{
					httpRequest.toast(err.msg)
				})
			},
			submit() {
				let data = []
				this.weekDays.forEach(item=>{
					if(item.ischeck){
						data.push(item.value)
					}
				})
				httpRequest.request('/dhtapi/user/editKqTimeDetail', 'POST', {
					kq_week_num: data.join(), //考勤上班时间
					kq_start_time: this.kq_start_time, //考勤上班时间
					kq_end_time: this.kq_end_time, //考勤下班时间
					kq_start_starttime: this.kq_start_starttime, //考勤上班开始打卡时间
					kq_start_endtime: this.kq_start_endtime, //考勤上班结束打卡时间
					kq_end_starttime: this.kq_end_starttime, //考勤下班开始打卡时间
					kq_end_endtime: this.kq_end_endtime, //考勤下班结束打卡时间
					kq_end_endtime_type: this.kq_end_endtime_type, //考勤下班时间结束类型:1=当天,2=次日
					kq_kg_time: this.kq_kg_time, //考勤旷工时间
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				}).catch(err=>{
					httpRequest.toast(err.msg)
				})
			},
			checkweek(item) {
				item.ischeck = item.ischeck ? false : true;
			},
			checktime(val){
				this.checkcurrent = val
				this.show = true
			},
			confirmtime(e){
				this.show = false
				if(this.checkcurrent==1){
					this.kq_start_time = e.value
				} else if (this.checkcurrent==2){
					this.kq_end_time = e.value
				} else if (this.checkcurrent==3){
					this.kq_start_starttime = e.value
				} else if (this.checkcurrent==4){
					this.kq_start_endtime = e.value
				} else if (this.checkcurrent==5){
					this.kq_end_starttime = e.value
				} else if (this.checkcurrent==6){
					this.kq_end_endtime = e.value
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}

	.itembox {
		width: 25%;
	}

	.itemlable {
		padding: 10rpx 30rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		background-color: rgba(153, 153, 153, .1);
		color: #999;
	}

	.itemlables {
		padding: 10rpx 30rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		background-color: rgba(11, 189, 203, .1);
		color: #0bbdcb;
	}
</style>